<template>
    <form-block ref="search" class="form-inline form_box">
        <div v-if="isSearch" class="search flex_item">
            <slot name="form" />
            <a-button class="form_btn" type="primary" icon="search" @click="search()">搜索</a-button>
            <a-button class="form_btn btn_space" icon="redo" @click="reset()">重置</a-button>
        </div>
        <div class="extra" v-if="isExtra">
            <slot name="extra" />
        </div>
    </form-block>
</template>
<script>
import FormBlock from '../formBlock';
export default {
    name: 'FormSearch',
    components: {
        FormBlock
    },
    props: {
        isSearch: {
            type: Boolean,
            default: true
        },
        isExtra: {
            type: Boolean,
            default: true
        }
    },
    methods: {
        search() {
            this.$emit('search');
        },
        reset() {
            this.$emit('reset');
        }
    }
};
</script>
<style lang="scss" scoped>
$space: 16px;
.form_box {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    .flex_item {
        flex: 1;
        -webkit-flex: 1;
    }
}
.form-inline {
    // margin-bottom: $space;
    // padding: $space $space 0;
    box-sizing: border-box;
    background: #fff;
    // border: 1px solid #ebeef5;
    .form_btn {
        margin-bottom: $space;
    }
}
.extra {
    margin-bottom: $space;
}
::v-deep .ant-form-item-control {
    line-height: 1 !important;
}
</style>
